<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="divport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/element.v2.css">
    <link rel="stylesheet" href="/css/common.css">
    <title>游戏充值</title>

    <style>
        .recharge-page {
            width: 630px;
            margin: 30px auto;
        }
        .tips {
            padding: 10px;
            font-size: 14px;
            line-height: 28px;
            background-color: #d7e2ef;
            border: 1px solid #ec846a;
            color: #ec846a;
            border-radius: 6px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
@verbatim
    <div class="recharge-page" id="app">
        <div class="tips">
            请自习检查订单信息，如果与您的任务信息不相符，请关闭本页面，重新打开NPC点击充值按钮。如确认无误，即可点击立即充值进行充值。
        </div>
        <div class="content-box">
            <el-form :model="rechargeForm" label-width="100px">
                <el-form-item label="订单编号">
                    <el-input v-model="rechargeForm.order_no" disabled></el-input>
                </el-form-item>
                <el-form-item label="游戏版本">
                    <el-input v-model="rechargeForm.game_version" disabled></el-input>
                </el-form-item>
                <el-form-item label="游戏分区">
                    <el-input v-model="rechargeForm.game_server" disabled></el-input>
                </el-form-item>
                <el-form-item label="游戏账号">
                    <el-input v-model="rechargeForm.game_account" disabled></el-input>
                </el-form-item>
                <el-form-item label="游戏人物">
                    <el-input v-model="rechargeForm.game_role" disabled></el-input>
                </el-form-item>
                <el-form-item label="QQ号">
                    <el-input v-model="rechargeForm.qq" placeholder="请填写正确的QQ号，在充值异常时可及时联系您"></el-input>
                </el-form-item>
                <el-form-item label="充值金额">
                    <el-input v-model="rechargeForm.money"></el-input>
                </el-form-item>
                <el-form-item label="快速填写">
                    <el-radio-group v-model="rechargeForm.money">
                        <el-radio-button
                            v-for="item in rechargeMoneyList"
                            :label="item.need_money"
                            :key="item.need_money"
                        >{{item.need_money}}元</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="支付类型">
                    <el-radio-group v-model="rechargeForm.pay_type">
                        <el-radio-button label="WEIXIN">微信支付</el-radio-button>
                        <el-radio-button label="ALIPAY">支付宝</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="startPay">立即充值</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--    充值弹窗-->
        <el-dialog title="支付页面" :visible.sync="payVisible" width="600px" center>
            <template v-if="payInfo.type === 1">
                <div id="pay-web-info"></div>
            </template>
            <template v-if="payInfo.type === 2">
                <div style="margin: 100px 0; text-align: center; font-size: 20px;">
                    请勿关闭此弹窗，支付成功后会自动关闭！
                </div>
            </template>
            <template v-if="payInfo.type === 3">
                <div id="qrcode" style="width: 256px; margin: 20px auto;"></div>
            </template>
            <template v-if="payInfo.type === 4 || payInfo.type === 5">
                <div style="width: 256px; margin: 20px auto;">
                    <img :src="payInfo.data" alt="" style="width: 256px; height: 256px;">
                </div>
            </template>
        </el-dialog>

    </div>
</body>
@endverbatim
<script src="/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入组件库 -->
<script src="/js/element.v2.js"></script>
<script src="/js/qrcode.min.js" type="text/javascript"></script>
<script>
    const App = new Vue({
        el: '#app',
        data: {
            rechargeForm: {
                order_no: '{{$orderNo}}',
                money: '',
                pay_type: 'WEIXIN',
                game_version: '{{$gameVersion}}',
                game_server: '{{$gameServer}}',
                game_account: '{{$gameAccount}}',
                game_role: '{{$gameRole}}',
                qq: '',
                union_id: '{{$unionId}}',
                plat_name: '{{$platName}}',
            },
            rechargeMoneyList: [
                {need_money: 10},
                {need_money: 20},
                {need_money: 30},
                {need_money: 50},
                {need_money: 100},
                {need_money: 300},
                {need_money: 500},
                {need_money: 1000},
                {need_money: 2000},
                {need_money: 5000},
            ],
            payLoading: false,
            payVisible: false,
            payInfo: {
                type: 0,
                data: "",
            },
            curOrderId: 0,
        },
        watch: {
            payVisible: function (val) {
                if (!val && this.queryOrderStatusTimer) {
                    clearInterval(this.queryOrderStatusTimer)
                    return
                }
                this.queryOrderStatusTimer = setInterval(this.getOrderStatus, 2000)
            },
        },
        methods: {
            getDzLy: function (money) {
                return Math.floor(+money *1.01);
            },
            getUrlParam: function (name) {
                let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                let r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURI(r[2]);
                return '';
            },
            startPay: function () {
                this.curOrderType = 3
                this.payLoading = true
                this.rechargeForm.money = parseInt(this.rechargeForm.money)
                if (this.rechargeForm.money < 10) {
                    this.$message.error('金额必须大于10')
                    return
                }
                if (this.rechargeForm.money % 1 !== 0){
                    this.$message.error('金额必须是整数')
                    return
                }
                let _that = this
                $.post('/gameRecharge', this.rechargeForm, function (res) {
                    console.log(res)
                    if (res.success !== 'true') {
                        this.payLoading = false
                        _that.$message.error(res.msg)
                        return
                    }
                    _that.curOrderId = res.data.order_id
                    _that.rechargeVisible = false
                    _that.payLoading = false
                    _that.rechargeForm = {
                        money: '',
                        pay_type: '',
                    }
                    _that.openPayPage(res.data.pay_info)
                })
            },
            getOrderStatus: function () {
                let _that = this
                $.get('/api/pay/getOrderStatus/'+this.curOrderType+'/'+this.curOrderId, function (res) {
                    console.log(res)
                    if (res.success !== 'true') {
                        _that.payLoading = false
                        _that.$message.error(res.msg)
                        return
                    }
                    if (res.data.status === 1) {
                        _that.payVisible = false
                        _that.$message.success('支付成功')
                        setTimeout(function () {
                            window.close()
                        },2000)
                    }
                })
            },
            openPayPage: function (payInfo) {
                // 打开支付页面
                this.payInfo = payInfo.resultdata
                this.payVisible = true
                // 新窗口
                if (payInfo.resultdata.type === 2) {
                    window.open(payInfo.resultdata.data,'_blank');
                }
                // 二维码串
                if (payInfo.resultdata.type === 3) {
                    this.$nextTick(function() {
                        document.getElementById("qrcode").innerHTML = "";
                        new QRCode(document.getElementById("qrcode"), {
                            text: payInfo.resultdata.data,
                            width: 256,
                            height: 256,
                            colorDark : "#000",
                            colorLight : "#fff",
                            correctLevel : 0 // 二维码结构复杂性 0~3
                        });
                    })
                }
            },
        },
    })
</script>

</html>
